<template>
	<el-card>
		<el-form ref="queryForm" :inline="true">
			<el-form-item prop="postCode" label="关键词:" style="width: 320px">
				<el-input v-model="state.queryParams.condition" placeholder="请输入编号或名称关键字" clearable></el-input>
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<el-table
			v-loading="state.dataListLoading"
			:data="dataList"
			class="mt20"
			stripe
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column label="项目编号" align="center" prop="projectNumber" />
			<el-table-column label="项目名称" align="center" prop="researchName" />
			<el-table-column label="成果名称" align="center" prop="filingName" />
			<el-table-column label="主要完成单位" align="center" prop="mainCompletionUnits" />
			<el-table-column label="主要完成人" align="center" prop="mainCompletionPerson" />
			<el-table-column label="完成日期" align="center" prop="achievementReleaseDate" width="150">
				<template #default="scope">
					<span v-if="scope.row.achievementReleaseDate">{{ scope.row.achievementReleaseDate.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="摘要" align="center" prop="filingAbstract" show-overflow-tooltip />
			<el-table-column label="操作" align="center" width="100">
				<template #default="scope">
					<el-icon :size="16" color="#1491FF" title="查看" style="cursor: pointer; margin: 0 6px" @click="handleDetail(scope.row)">
						<View />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.pageNum"
			:page-size="state.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		></el-pagination>
	</el-card>

	<cmDialog v-model="showDialog" modal-title="详情">
		<el-form :model="form" style="margin-top: 20px" label-width="120px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="项目编号">
						<el-input v-model="form.projectNumber" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="项目名称">
						<el-input v-model="form.researchName" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="成果名称">
						<el-input v-model="form.filingName" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="完成日期">
						<el-input v-model="form.achievementReleaseDate" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="主要完成单位">
						<el-input v-model="form.mainCompletionUnits" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="主要完成人">
						<el-input v-model="form.mainCompletionPerson" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="摘要">
						<el-input v-model="form.filingAbstract" readonly type="textarea" :rows="5"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</cmDialog>
</template>
<script setup lang="ts">
import { yanfachengguoList } from '@/api/other/index'
import { reactive, ref, watch } from 'vue'

import cmDialog from '@/components/cm-dialog/index.vue'

const props = defineProps({
	step: {
		type: String,
		default: ''
	}
})

interface Form {
	projectNumber: string
	researchName: string
	filingName: string
	achievementReleaseDate: string
	mainCompletionUnits: string
	mainCompletionPerson: string
	filingAbstract: string
}

const state = reactive({
	queryParams: {
		condition: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false
})
const dataList = ref([])
const showDialog = ref<boolean>(false)
const form = ref<Form>(null)

watch(
	() => props.step,
	newVal => {
		if (newVal === 'seventh') {
			getDataList()
		}
	}
)

const getDataList = () => {
	state.dataListLoading = true
	yanfachengguoList({
		pageNum: state.pageNum,
		pageSize: state.pageSize,
		condition: state.queryParams.condition
	}).then(res => {
		state.dataListLoading = false
		dataList.value = res.data.list || []
		state.total = res.data.total || 0
	})
}

const handleDetail = (row: any) => {
	showDialog.value = true
	row.achievementReleaseDate = row.achievementReleaseDate ? row.achievementReleaseDate.slice(0, 10) : ''
	form.value = row
}

const handleSearch = () => {
	state.pageNum = 1
	getDataList()
}

const handleReset = () => {
	state.queryParams.condition = ''
	state.pageNum = 1
	getDataList()
}

const sizeChangeHandle = (val: number) => {
	state.pageSize = val
	getDataList()
}

const currentChangeHandle = (val: number) => {
	state.pageNum = val
	getDataList()
}
</script>

<style lang="scss" scoped></style>
